import Vue from 'vue';
import Notification from './notification';

// Vue.component(Notification.name, Notification);

let instances = [];
let seed = 1;

let NotificationConstructor = Vue.extend(Notification);

function notify(options = {}) {    
    let instance = new NotificationConstructor({
        propsData: {
            content: options.content
        },
        data() {
            return {
                visible: false,
                verticalOffset: 0
            }
        },
        computed: {
            style() {
                return {
                    right: '20px',
                    bottom: `${this.verticalOffset}px`
                }
            }
        }
    });
    instance.id = `notification_${seed++}`;
    let vm = instance.$mount();
    instance.vm = vm;
    document.querySelector('body').appendChild(vm.$el);
    instance.vm.visible = true;

    let verticalOffset = 0;
    instances.forEach(item => {
        let offset = item.vm.$el.offsetHeight + 16;
        verticalOffset += offset;
    });
    verticalOffset += 16;
    instance.verticalOffset = verticalOffset;
    instances.push(instance);    
}

Vue.prototype.$myNotify = notify